<template>
	<view>
		您好，{{userName}}! 请您填写以下资料，以便在您获得返利时我们主动联系您。谢谢。
		<view class="mobile">
			<input class="inputMobile" type="number" clearable focus v-model.number="mobile" placeholder="请输入手机号"></input>
			<input class="verifyCode" type="number" v-model.number="verifyCode" placeholder="请输入验证码"></input>
			<button class="getMsg" type="default" size="mini" @tap="getMsg">获取验证码</button>
		</view>
		<button class="submit" type="primary" size="mini" @tap="submit">提交</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				name: '参与者',
				mobile: '',
				verifyCode: '',
			};
		},
		computed: mapState({
			userName: 'userName',
			Token: 'Token',
			userType: 'userType',
			userState: 'userState'
		}),
		// onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
		// 	console.log(option); //打印出上个页面传递的参数。
		// 	this.name = option.openid
		// },
		methods: {
			...mapMutations(['userStateChange']),
			submit() {
				var re = /^1\d{10}$/;
				var re2 = /\d{6}$/;
				var _this = this;
				if (re.test(this.mobile) && re2.test(this.verifyCode)) {
					// 接口传输手机号+验证码，成功则后台修改手机号
					// console.log(this.Token)
					uni.request({
						url: 'https://app.slinqueen.com/minicard/UserAPI/PostModifyUserInfo',
						method: 'POST',
						header: {'Token':this.Token},
						data: {
							TelphoneNumber: this.mobile,
							VerifyCode: this.verifyCode
						},
						success: (res) => {
							if (res.data.code == 0) {
								uni.showToast({
									icon: 'none',
									title: res.data.codeMsg
								});
								_this.userStateChange(res.data.data)
								uni.navigateBack();
							}
						},
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '信息填写有误'
					});
					return
				}
			},
			getMsg(event) {
				var re = /^1\d{10}$/;
				if (!this.mobile) {
					uni.showToast({
						icon: 'none',
						title: '请填写手机号'
					});
					return
				} else if (!re.test(this.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的手机号'
					});
					return
				} else {
					var telephoneNumber = this.mobile;
					// 获取手机验证码（测试，未发出短信）
					uni.request({
						url: 'https://app.slinqueen.com/minicard/UserAPI/GetTelphoneVerifyCode?telephoneNumber='+telephoneNumber,
						method: 'GET',
						success: (res) => {
							if (res.data.code == 0) {
								console.log(res.data.data)
								this.verifyCode = res.data.data;
							}
						},
					});
				}
			}
		}
	}
</script>

<style lang="less">
.mobile {
	margin: 20upx;
	padding: 20upx;
	height: 140upx;
	display: block;
	clear: both;
}

.inputMobile {
	margin-bottom: 20upx;
	border: 1upx solid black;
	height: 60upx;
	width: 100%;
}

.getMsg {
	width: 30%;
	height: 62upx;
	margin-left: 3%;
}

.verifyCode {
	border: 1upx solid black;
	height: 60upx;
	width: 65%;
	float: left;
}

.submit {
	// display: block;
	left: 50%;
	transform: translateX(-50%);
}
</style>
